<!--
 * @FileDescription 选择ye
 * @Author cl
 * @Date 20240326 11:02:12
 * @LastEditors cl
 * @LastEditTime 20240326 11:02:12
-->
<template>
    <div class="wp_class">
        <div class="deletePop" v-if="isOpenSave">
          <span class="deleteText">是否确定保存？</span>
          <div class="Btn">
            <button class="deleteCancel" @click="saveCancel">取消</button>
            <button class="deleteConfirm" @click="saveConfirm">保存</button> 
          </div>
        </div>
        <div class="header">
          <h1>在线故障诊断数据共享平台</h1>
          <div class="userName">张三</div>
        </div>
        <div class="box">
          <h3>吉利帝豪EV450</h3>
          <div class="btn">
            <div class="refresh" @click="refreshFn">
              <text class="refreshText">刷新</text>
            </div>
            <div class="goBack" @click="goBackFn">
              <text class="goBackText">返回</text>
            </div>
            <div class="save" @click="openSave">
              <text class="saveText">保存</text>
            </div>
          </div>
        </div>
        <div class="content">
            <div class="baseMsg">
              <div class="faultPointName">
                <img class="faultPointNameImg" src="/public/images/页面四/图标点.png" alt="">
                故障点：{{ HomeContent.Default.detailData.value.name }}
              </div>
              <div class="terminalName">
                端子1：<div class="terminaList">{{ HomeContent.Default.detailData.value.terminal1 }}</div>
                端子2：<div class="terminaList">{{ HomeContent.Default.detailData.value.terminal2 }}</div>
              </div>
            </div>
            <div class="faultDescription">
            <div style="margin-bottom: 34px;font-size: 24px;font-weight: 600; color:white"><img style="width: 35px;margin-right:5px;margin-bottom: 5px;" src="/public/images/页面四/图标点.png">故障现象</div>
            <a-table :pagination="false" bordered :data-source="dataSource" :columns="columns">
              <template #bodyCell="{ column, text, record }">
                <template v-if="['serialNumber', 'faultDescription'].includes(column.dataIndex)">
                  <div>
                    <a-input
                      v-if="editableData[record.key]"
                      v-model:value="editableData[record.key][column.dataIndex]"
                      style="margin: -5px 0"
                    />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'operation' ">
                  <div class="operationBtn">
                    <div class="editable-row-operations">
                      <span v-if="editableData[record.key]">
                        <a-typography-link @click="save(record.key)"><img style="height: 25px;margin-right: 30px;" src="/public/images/页面四/保存硬盘.png"></a-typography-link>
                        <a-typography-link @click="cancel(record.key)"><img style="height: 25px;" src="/public/images/页面三/撤销.png"></a-typography-link>
                      </span>
                      <span v-else>
                        <a @click="edit(record.key)"><img src="/public/images/页面四/编辑.png" style="height: 25px;"></a>
                      </span>
                    </div>

                    <a-popconfirm v-if="dataSource.length" title="是否确定删除？" overlay-class-name="pops" ok-text="确定" cancel-text="取消" @confirm="deleteConfirmFn(record.key)">
                      <a><img src="/public/images/页面四/删除.png" style="height: 25px; margin-left: 30px;"></a>
                    </a-popconfirm>
                  </div>
                </template>
              </template>
            </a-table>            
            <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd"><img class="addPic" src="/public/images/页面四/添加.png"></a-button>
            <!-- 故障码22222222222222222222222222222222222222222222222222222222222222222222222222222222 -->
            <div style="margin-bottom: 34px; margin-top: 131px; font-size: 24px;font-weight: 600; color:white"><img style="width: 35px;margin-right:5px;margin-bottom: 5px;" src="/public/images/页面四/图标点.png">故障码</div>
            <a-table :pagination="false" bordered :data-source="dataSource2" :columns="columns2">
              <template #bodyCell="{ column, text, record }">
                <template v-if="['SerialNumber', 'System','FaultPoint','FaultDescription'].includes(column.dataIndex)">
                  <div>
                    <a-input
                      v-if="editableData2[record.key]"
                      v-model:value="editableData2[record.key][column.dataIndex]"
                      style="margin: -5px 0"
                    />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'operation' ">
                  <div class="operationBtn">
                    <div class="editable-row-operations">
                      <span v-if="editableData2[record.key]">
                        <a-typography-link @click="save2(record.key)"><img style="height: 25px;margin-right: 30px;" src="/public/images/页面四/保存硬盘.png"></a-typography-link>
                        <a-typography-link @click="cancel2(record.key)"><img style="height: 25px;" src="/public/images/页面三/撤销.png"></a-typography-link>
                      </span>
                      <span v-else>
                        <a @click="edit2(record.key)"><img src="/public/images/页面四/编辑.png" style="height: 25px;"></a>
                      </span>
                    </div>

                    <a-popconfirm v-if="dataSource2.length" title="是否确定删除？" style="background-color: pink;" overlayClassName="pops" ok-text="确定" cancel-text="取消" @confirm="deleteConfirmFn2(record.key)">
                      <a><img src="/public/images/页面四/删除.png" style="height: 25px; margin-left: 30px;"></a>
                    </a-popconfirm>
                  </div>
                </template>
              </template>
            </a-table>            
            <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd2"><img class="addPic" src="/public/images/页面四/添加.png"></a-button>
            <!-- 22222222222222222222222222222222222222222222222222222222222222222222222222222222 -->
            <!-- 电压33333333333333333333333333333333333333333333333333333333333333333333333333333333 -->
            <div style="margin-bottom: 34px; margin-top: 131px; font-size: 24px;font-weight: 600; color:white"><img style="width: 35px;margin-right:5px;margin-bottom: 5px;" src="/public/images/页面四/图标点.png">电压测量</div>
            <!-- <a-table :pagination="false" bordered border="0" cellspacing=0 cellpadding=0 :data-source="dataSource3" :columns="columns3"> -->
            <a-table :pagination="false" bordered border="0" cellspacing=0 cellpadding=0 :data-source="dataSource3" :columns="columns3"  :scroll="{ x: 3000 }">
              <template #bodyCell="{ column, text, record }">
                <template v-if="['SerialNumber','RedProbe','BlackProbe','OffVal','OffFault','AccVal','AccFault','OnVal','OnFault','StartVal','StartFault','Code',].includes(column.dataIndex)">
                  <div>
                    <a-input
                      v-if="editableData3[record.key]"
                      v-model:value="editableData3[record.key][column.dataIndex]"
                      style="margin: -5px 0"
                    />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'operation' ">
                  <div class="operationBtn">
                    <div class="editable-row-operations">
                      <span v-if="editableData3[record.key]">
                        <a-typography-link @click="save3(record.key)"><img style="height: 25px;margin-right: 30px;" src="/public/images/页面四/保存硬盘.png"></a-typography-link>
                        <a-typography-link @click="cancel3(record.key)"><img style="height: 25px;" src="/public/images/页面三/撤销.png"></a-typography-link>
                      </span>
                      <span v-else>
                        <a @click="edit3(record.key)"><img src="/public/images/页面四/编辑.png" style="height: 25px;"></a>
                      </span>
                    </div>

                    <a-popconfirm v-if="dataSource3.length" title="是否确定删除？" style="background-color: pink;" overlayClassName="pops" ok-text="确定" cancel-text="取消" @confirm="deleteConfirmFn3(record.key)">
                      <a><img src="/public/images/页面四/删除.png" style="height: 25px; margin-left: 30px;"></a>
                    </a-popconfirm>
                  </div>
                </template>
              </template>
            </a-table>            
            <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd3"><img class="addPic" src="/public/images/页面四/添加.png"></a-button>
            <!-- 33333333333333333333333333333333333333333333333333333333333333333333333333333333 -->
            <!-- 电阻44444444444444444444444444444444444444444444444444444444444444444444444444444444 -->
            <div style="margin-bottom: 34px; margin-top: 131px; font-size: 24px;font-weight: 600; color:white"><img style="width: 35px;margin-right:5px;margin-bottom: 5px;" src="/public/images/页面四/图标点.png">电阻测量</div>
            <a-table :pagination="false" bordered :data-source="dataSource4" :columns="columns4">
              <template #bodyCell="{ column, text, record }">
                <template v-if="['SerialNumber', 'RedPen','BlackPen','Normal','Fault'].includes(column.dataIndex)">
                  <div>
                    <a-input
                      v-if="editableData4[record.key]"
                      v-model:value="editableData4[record.key][column.dataIndex]"
                      style="margin: -5px 0"
                    />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'operation' ">
                  <div class="operationBtn">
                    <div class="editable-row-operations">
                      <span v-if="editableData4[record.key]">
                        <a-typography-link @click="save4(record.key)"><img style="height: 25px;margin-right: 30px;" src="/public/images/页面四/保存硬盘.png"></a-typography-link>
                        <a-typography-link @click="cancel4(record.key)"><img style="height: 25px;" src="/public/images/页面三/撤销.png"></a-typography-link>
                      </span>
                      <span v-else>
                        <a @click="edit4(record.key)"><img src="/public/images/页面四/编辑.png" style="height: 25px;"></a>
                      </span>
                    </div>

                    <a-popconfirm v-if="dataSource4.length" title="是否确定删除？" style="background-color: pink;" overlayClassName="pops" ok-text="确定" cancel-text="取消" @confirm="deleteConfirmFn4(record.key)">
                      <a><img src="/public/images/页面四/删除.png" style="height: 25px; margin-left: 30px;"></a>
                    </a-popconfirm>
                  </div>
                </template>
              </template>
            </a-table>            
            <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd4"><img class="addPic" src="/public/images/页面四/添加.png"></a-button>
            <!-- 44444444444444444444444444444444444444444444444444444444444444444444444444444444 -->
            <!-- 机理分析55555555555555555555555555555555555555555555555555555555555555555555555555555555 -->
            <div style="margin-bottom: 34px; margin-top: 131px; font-size: 24px;font-weight: 600; color:white"><img style="width: 35px;margin-right:5px;margin-bottom: 5px;" src="/public/images/页面四/图标点.png">机理分析</div>
            <a-table :pagination="false" bordered :data-source="dataSource5" :columns="columns5">
              <template #bodyCell="{ column, text, record }">
                <template v-if="['SerialNumber', 'ErrorDescription'].includes(column.dataIndex)">
                  <div>
                    <a-input
                      v-if="editableData5[record.key]"
                      v-model:value="editableData5[record.key][column.dataIndex]"
                      style="margin: -5px 0"
                    />
                    <template v-else>
                      <template v-if="column.dataIndex === 'ErrorDescription' ">
                        <text style="color: #33cccc;">123:</text>
                      </template>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'operation' ">
                  <div class="operationBtn">
                    <div class="editable-row-operations">
                      <span v-if="editableData5[record.key]">
                        <a-typography-link @click="save5(record.key)"><img style="height: 25px;margin-right: 30px;" src="/public/images/页面四/保存硬盘.png"></a-typography-link>
                        <a-typography-link @click="cancel5(record.key)"><img style="height: 25px;" src="/public/images/页面三/撤销.png"></a-typography-link>
                      </span>
                      <span v-else>
                        <a @click="edit5(record.key)"><img src="/public/images/页面四/编辑.png" style="height: 25px;"></a>
                      </span>
                    </div>

                    <a-popconfirm v-if="dataSource5.length" title="是否确定删除？" style="background-color: pink;" overlayClassName="pops" ok-text="确定" cancel-text="取消" @confirm="deleteConfirmFn5(record.key)">
                      <a><img src="/public/images/页面四/删除.png" style="height: 25px; margin-left: 30px;"></a>
                    </a-popconfirm>
                  </div>
                </template>
              </template>
            </a-table>            
            <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd5"><img class="addPic" src="/public/images/页面四/添加.png"></a-button>
            <!-- 55555555555555555555555555555555555555555555555555555555555555555555555555555555 -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, customRef, onMounted, reactive, ref, UnwrapRef } from 'vue';
import { cloneDeep, create } from 'lodash';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router'
import { addFaultAppearance, getFaultAppearance, deleteFaultAppearance, getFaultPoint, getFaultPointById, putFaultAppearance, putFaultPoint, getFaultCode, getResistor, getVoltage, getAnalysis, addFaultFaultCode, deleteFaultCode, putFaultFaultCode, addResistor, deleteResistor, putResistor, addAnalysis, deleteAnalysis, putAnalysis, addVoltage, deleteVoltage, putVoltage } from '@/api/apis';
import HomeContent from '@components/Apps/Simulation/HomeContent'
import type { TableColumnsType } from 'ant-design-vue';
const router = useRouter()
const route = useRoute()
const faultPointId = ref()
faultPointId.value = route.query.Id
console.log('faultPointId',faultPointId.value);
const params = {
  pointId:faultPointId.value
}
const resData = ref()
onMounted(async() => {
  let res = await getFaultPointById(faultPointId.value) 
  HomeContent.Default.detailData.value = res
  let res1 = await getFaultAppearance({pointId:faultPointId.value})
  resData.value = res1
  resData.value.forEach((element:any,index:any) => {
    dataSource.value.push({key:(element.id).toString(),serialNumber:(index+1),faultDescription:element.description})
  });

  let res2 = await getFaultCode(params)
  resData.value = res2
  resData.value.forEach((element:any,index:any) => {
    dataSource2.value.push({key:(element.id).toString(),SerialNumber:(index+1),System:element.systemName,FaultPoint:element.code,FaultDescription:element.description})
  });

  let res3 = await getVoltage(params)
  console.log('res3',res3);
  resData.value = res3
  resData.value.forEach((element:any,index:any) => {
    dataSource3.value.push({key:(element.id).toString(),SerialNumber:(index+1),RedProbe:element.redPen, BlackProbe:element.blackPen,OffVal:element.offVal,OffFault:element.offFault,AccVal:element.accVal,AccFault:element.accFault,OnVal:element.onVal,OnFault:element.onFault,StartVal:element.startVal,StartFault:element.startFault,Code:element.code})
  });

  let res4 = await getResistor(params)
  // console.log('res4',res4);
  resData.value = res4
  resData.value.forEach((element:any,index:any) => {
    dataSource4.value.push({key:(element.id).toString(),SerialNumber:(index+1),RedPen:element.redPen,BlackPen:element.blackPen,Normal:element.valueName,Fault:element.faultValue})
  });

  let res5 = await getAnalysis(params)
  // console.log('res5',res5);
  resData.value = res5
  resData.value.forEach((element:any,index:any) => {
    dataSource5.value.push({key:(element.id).toString(),SerialNumber:(index+1),ErrorDescription:element.description})
  });
})

async function refreshFn() {
  // 调用接口重新拿最新的数据
  HomeContent.Default.detailData.value = await getFaultPointById(faultPointId.value)
  console.log('========',HomeContent.Default.detailData.value);
  // console.log('faultPointId',faultPointId.value);
}
function goBackFn() {
  router.push('FaultPage')
}
const isOpen = ref(false)
const isOpenSave = ref(false)
// 保存弹窗
function openSave() {
  isOpenSave.value = true
}
function saveCancel() {
  isOpenSave.value = false
}

async function saveConfirm() {
  isOpenSave.value = false
  let FaultsData:any = []
  let res1 = await getFaultAppearance({pointId:faultPointId.value})
  resData.value = res1.data
  resData.value.forEach((element:any,index:any) => {
    FaultsData.push({key:(element.id).toString(),serialNumber:(index+1),faultDescription:element.description})  
  });
  let AppearanceData:any = []
  FaultsData.forEach((element:any) => {
    AppearanceData.push(element.faultDescription)
  });
  console.log('AppearanceData',AppearanceData);
  
  const params = {id:faultPointId.value}
  const data = {
    appearance:AppearanceData.toString()
  }
  await putFaultPoint(params,data)
  const params2 = {PageNumber:1,pageSize:1000,}
  await getFaultPoint(params2)
}
// ===============111111111111111111================================
interface DataItem {
  key: string;
  serialNumber: number;
  faultDescription: string;
}
const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    width: '5%',
  },
  {
    title: '故障描述',
    dataIndex: 'faultDescription',
    width: '85%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '10%',
  },
];
const dataSource = ref<any>([]);
const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {   
  data.push({
    key: i.toString(),
    serialNumber: i,
    faultDescription: '',
  });
}
const count = computed(() => dataSource.value.length + 1);
// 添加
async function handleAdd() {
  const newData = {
    pointId:faultPointId.value,
    description: '',
  };
  await addFaultAppearance(newData)
  let res = await getFaultAppearance({pointId:faultPointId.value})
  console.log('res',res);
  dataSource.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource.value.push({key:(element.id).toString(),serialNumber:(index+1),faultDescription:element.description})  
  });
}
// 删除
async function deleteConfirmFn(value:any) {
  await deleteFaultAppearance(value)
  let res = await getFaultAppearance({pointId:faultPointId.value})
  dataSource.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource.value.push({key:(element.id).toString(),serialNumber:(index+1),faultDescription:element.description})  
  });
}
// 编辑
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});
function edit(value:any) {  
  editableData[value] = cloneDeep(dataSource.value.filter((item:any) => value === item.key)[0]);
  console.log('editableData[value]',editableData[value].faultDescription);
}
async function save(value:any) {
  Object.assign(dataSource.value.filter((item:any) => value === item.key)[0], editableData[value]);
  console.log('value',editableData[value].faultDescription);

  const putData = {
    description:editableData[value].faultDescription,
  };
  const params = { id: value}
  await putFaultAppearance(params,putData)
  delete editableData[value];
}
function cancel(value:any) {
  delete editableData[value];
}
// ==================11111结束========================================
// ==================22222故障码开始========================================
interface DataItem2 {
  key: string;
  SerialNumber: number;
  System: string,
  FaultPoint: string,
  FaultDescription: string,
}
const columns2 = [
  {
    title: '序号',
    dataIndex: 'SerialNumber',
    width: '5%',
  },
  {
    title: '系统',
    dataIndex: 'System',
    width: '20%',
  },
  {
    title: '故障码',
    dataIndex: 'FaultPoint',
    width: '20%',
  },
  {
    title: '故障描述',
    dataIndex: 'FaultDescription',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '10%',
  },
];
const dataSource2 = ref<any>([]);
const data2: DataItem2[] = [];
for (let i = 0; i < 100; i++) {
  data2.push({
    key: i.toString(),
    SerialNumber: i,
    System:'',
    FaultPoint: '',
    FaultDescription: '',
  });
}
const count2 = computed(() => dataSource2.value.length + 1);
async function handleAdd2() {
  const newData = {
    pointId:faultPointId.value,
    systemName: '',
    code: '',
    description: '',
  };
  await addFaultFaultCode(newData)
  let res = await getFaultCode({pointId:faultPointId.value})
  dataSource2.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource2.value.push({key:(element.id).toString(),SerialNumber:(index+1),System:element.systemName,FaultPoint:element.code,FaultDescription:element.description})  
  });
}
// 删除
async function deleteConfirmFn2(value:any) {
  await deleteFaultCode(value)
  let res = await getFaultCode({pointId:faultPointId.value})
  dataSource2.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource2.value.push({key:(element.id).toString(),SerialNumber:(index+1),System:element.systemName,FaultPoint:element.code,FaultDescription:element.description})  
  });
}
const editableData2: UnwrapRef<Record<string, DataItem2>> = reactive({});
function edit2(value:any) {
  editableData2[value] = cloneDeep(dataSource2.value.filter((item:any) => value === item.key)[0]);
  console.log('editableData[value]',editableData2[value]);
}
async function save2(value:any) {
  Object.assign(dataSource2.value.filter((item:any) => value === item.key)[0], editableData2[value]);
  console.log('value',editableData2[value]);
  const putData = {
    description: editableData2[value].FaultDescription,
    systemName:editableData2[value].System,
    code:editableData2[value].FaultPoint,
  };
  const params = { id: value}
  await putFaultFaultCode(params,putData)
  delete editableData2[value];
}
function cancel2(value:any) {
  delete editableData2[value];
}
// ==================22222结束========================================
// ==================电压检测========================================
interface DataItem3 {
  key: string;
  SerialNumber: number;
  RedProbe: string;
  BlackProbe: string;
  OffVal:string;
  OffFault:string;
  AccVal:string;
  AccFault:string;
  OnVal:string;
  OnFault:string;
  StartVal:string;
  StartFault:string;
  Code:number;
}
const columns3: TableColumnsType = [
  { title: '序号', width:'2.9%', dataIndex: 'SerialNumber',fixed: 'left' },
  { title: '红表笔', dataIndex: 'RedProbe'},
  { title: '黑表笔', dataIndex: 'BlackProbe'},
  { title: '车辆关闭正常(OFF)', dataIndex: 'OffVal'},
  { title: '车辆关闭异常(OFF)', dataIndex: 'OffFault'},
  { title: '车辆解锁正常(ACC)', dataIndex: 'AccVal'},
  { title: '车辆解锁异常(ACC)', dataIndex: 'AccFault'},
  { title: '车辆启动正常(ON)', dataIndex: 'OnVal'},
  { title: '车辆启动异常(ON)', dataIndex: 'OnFault'},
  { title: '车辆启动正常(START)', dataIndex: 'StartVal'},
  { title: '车辆启动异常(START)', dataIndex: 'StartFault'},
  { title: '故障码', dataIndex: 'Code'},
  {
    title: '操作',
    key: 'operation',
    dataIndex: 'operation',
    fixed: 'right',
    width: '5.6%',
  },
];
// const columns3 = [
//   {
//     title: '序号',
//     dataIndex: 'SerialNumber',
//     fixed: true,
//     width: '3%',
//   },
//   {
//     title: '红表笔',
//     dataIndex: 'RedProbe',
//     // width: '8%',
//   },
//   {
//     title: '黑表笔',
//     dataIndex: 'BlackProbe',
//     width: '8%',
//   },
//   {
//     title: '车辆关闭正常(OFF)',
//     dataIndex: 'OffVal',
//     width: '8%',
//   },
//   {
//     title: '车辆关闭异常(OFF)',
//     dataIndex: 'OffFault',
//     width: '8%',
//   },
//   {
//     title: '车辆解锁正常(ACC)',
//     dataIndex: 'AccVal',
//     width: '8%',
//   },
//   {
//     title: '车辆解锁异常(ACC)',
//     dataIndex: 'AccFault',
//     width: '8%',
//   },
//   {
//     title: '车辆启动正常(ON)',
//     dataIndex: 'OnVal',
//     width: '8%',
//   },
//   {
//     title: '车辆启动异常(ON)',
//     dataIndex: 'OnFault',
//     width: '8%',
//   },
//   {
//     title: '车辆启动正常(START)',
//     dataIndex: 'StartVal',
//     width: '8%',
//   },
//   {
//     title: '车辆启动异常(START)',
//     dataIndex: 'StartFault',
//     width: '8%',
//   },
//   {
//     title: '故障码',
//     dataIndex: 'Code',
//     width: '8%',
//   },
//   {
//     title: '操作',
//     dataIndex: 'operation',
//     fixed: 'right',
//     width: '6%',
//   },
// ];

const dataSource3 = ref<any>([
  {
    key: '1',
    SerialNumber: 1,
    RedProbe: '111',
    BlackProbe: '111',
    OffVal:'111',
    OffFault:'111',
    AccVal:'111',
    AccFault:'111',
    OnVal:'111',
    OnFault:'111',
    StartVal:'111',
    StartFault:'111',
    Code:12,
  },
  {
    key: '2',
    SerialNumber: 2,
    RedProbe: '111',
    BlackProbe: '111',
    OffVal:'111',
    OffFault:'111',
    AccVal:'111',
    AccFault:'111',
    OnVal:'111',
    OnFault:'111',
    StartVal:'111',
    StartFault:'111',
    Code:12,
  },
  {
    key: '3',
    SerialNumber: 3,
    RedProbe: '111',
    BlackProbe: '111',
    OffVal:'111',
    OffFault:'111',
    AccVal:'111',
    AccFault:'111',
    OnVal:'111',
    OnFault:'111',
    StartVal:'111',
    StartFault:'111',
    Code:12,
  },
]);
const data3: DataItem3[] = [];
for (let i = 0; i < 100; i++) {
  data3.push({
    key: i.toString(),
    SerialNumber: i,
    RedProbe: `'SC42-${i}'`,
    BlackProbe: `'B_${i}'`,
    OffVal: '12.5',
    OffFault: '',
    AccVal: '14.2',
    AccFault: '11.6',
    OnVal: '',
    OnFault: '',
    StartVal: '',
    StartFault: '',
    Code: 0,
  });
}
const count3 = computed(() => dataSource3.value.length + 1);
async function handleAdd3() {
  const newData = {
    key: `${count3.value}`,
    SerialNumber: Number(`${count3.value}`),
    RedProbe:'',
    BlackProbe: '',
    OffVal: '',
    OffFault: '',
    AccVal: '',
    AccFault: '',
    OnVal: '',
    OnFault: '',
    StartVal: '',
    StartFault: '',
    Code: 0,
  };
  dataSource3.value.push(newData);
  // await addVoltage(newData)
  // let res = await getVoltage({pointId:faultPointId.value})
  // dataSource3.value = []
  // resData.value = res
  // resData.value.forEach((element:any,index:any) => {
  //   dataSource3.value.push({key:(element.id).toString(),SerialNumber:(index+1),RedProbe:element.redPen, BlackProbe:element.blackPen,OffVal:element.offVal,OffFault:element.offFault,AccVal:element.accVal,AccFault:element.accFault,OnVal:element.onVal,OnFault:element.onFault,StartVal:element.startVal,StartFault:element.startFault,Code:element.code})
  // });
}
// 删除弹窗
async function deleteConfirmFn3(value:any) {
  await deleteVoltage(value)
  let res = await getVoltage({pointId:faultPointId.value})
  dataSource3.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource3.value.push({key:(element.id).toString(),SerialNumber:(index+1),RedProbe:element.redPen, BlackProbe:element.blackPen,OffVal:element.offVal,OffFault:element.offFault,AccVal:element.accVal,AccFault:element.accFault,OnVal:element.onVal,OnFault:element.onFault,StartVal:element.startVal,StartFault:element.startFault,Code:element.code})
  });
}
const editableData3: UnwrapRef<Record<string, DataItem3>> = reactive({});
function edit3(value:any) {
  editableData3[value] = cloneDeep(dataSource3.value.filter((item:any) => value === item.key)[0]);
}
async function save3(value:any) {
  Object.assign(dataSource3.value.filter((item:any) => value === item.key)[0], editableData3[value]);
  console.log('value',editableData3[value]);
  const putData = {
    redPen: editableData3[value].RedProbe,
    blackPen:editableData3[value].BlackProbe,
    offVal:editableData3[value].OffVal,
    offFault:editableData3[value].OffFault,
    accVal:editableData3[value].AccVal,
    accFault:editableData3[value].AccFault,
    onVal:editableData3[value].OnVal,
    onFault:editableData3[value].OnFault,
    startVal:editableData3[value].StartVal,
    startFault:editableData3[value].StartFault,
    code:editableData3[value].Code,
  };
  const params = { id: value}
  await putVoltage(params,putData)
  delete editableData3[value];
}
function cancel3(value:any) {
  delete editableData3[value];
}
// ==================33333结束========================================
// ==================电阻检测========================================
interface DataItem4 {
  key: string;
  SerialNumber: number;
  RedPen: string;
  BlackPen: string;
  Normal: string;
  Fault: string;
}
const columns4 = [
  {
    title: '序号',
    dataIndex: 'SerialNumber',
    width: '5%',
  },
  {
    title: '红表笔',
    dataIndex: 'RedPen',
    width: '15%',
  },
  {
    title: '黑表笔',
    dataIndex: 'BlackPen',
    width: '15%',
  },
  {
    title: '正常',
    dataIndex: 'Normal',
    width: '15%',
  },
  {
    title: '故障',
    dataIndex: 'Fault',
    width: '40%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '10%',
  },
];
const dataSource4 = ref<any>([]);
const data4: DataItem4[] = [];
for (let i = 0; i < 100; i++) {
  data4.push({
    key: i.toString(),
    SerialNumber: i,
    RedPen: '',
    BlackPen: '',
    Normal: '',
    Fault: '',
  });
}
const count4 = computed(() => dataSource4.value.length + 1);
async function handleAdd4() {
  const newData = {
    pointId:faultPointId.value,
    // RedPen: `'SC42-${count4.value}'`,
    // BlackPen: `'B_${count4.value}'`,
    // Normal: Number(`0.${count4.value}`),
    // Fault: `OL${count4.value}`,
    RedPen: '',
    BlackPen: '',
    Normal: '',
    Fault: '',
  }
  await addResistor(newData)
  let res = await getResistor({pointId:faultPointId.value})
  console.log('res444',res);
  dataSource4.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource4.value.push({key:(element.id).toString(),SerialNumber:(index+1),RedPen:element.redPen,BlackPen:element.blackPen,Normal:element.valueName,Fault:element.faultValue})  
  });
}
// 删除弹窗
async function deleteConfirmFn4(value:any) {
  await deleteResistor(value)
  let res = await getResistor({pointId:faultPointId.value})
  dataSource4.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource4.value.push({key:(element.id).toString(),SerialNumber:(index+1),RedPen:element.redPen,BlackPen:element.blackPen,Normal:element.valueName,Fault:element.faultValue})  
  });
}
const editableData4: UnwrapRef<Record<string, DataItem4>> = reactive({});

function edit4(value:any) {
  editableData4[value] = cloneDeep(dataSource4.value.filter((item:any) => value === item.key)[0]);
}
async function save4(value:any) {
  Object.assign(dataSource4.value.filter((item:any) => value === item.key)[0], editableData4[value]);
  console.log('value4',editableData4[value].RedPen);

  const putData = {
    faultValue:editableData4[value].Fault,
    redPen:editableData4[value].RedPen,
    blackPen:editableData4[value].BlackPen,
    valueName:editableData4[value].Normal,
  };
  const params = { id: value}
  await putResistor(params,putData)

  delete editableData4[value];
}
function cancel4(value:any) {
  delete editableData4[value];
}
// ==================44444结束========================================
// ==================55555开始========================================
interface DataItem5 {
  key: string;
  SerialNumber: number;
  ErrorDescription: string
}
const columns5 = [
  {
    title: '序号',
    dataIndex: 'SerialNumber',
    width: '5%',
  },
  {
    title: '故障描述',
    dataIndex: 'ErrorDescription',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '10%',
  },
];
const dataSource5 = ref<any>([]);
const data5: DataItem5[] = [];
for (let i = 0; i < 100; i++) {
  data5.push({
    key: i.toString(),
    SerialNumber: i,
    ErrorDescription:'',
  });
}
const count5 = computed(() => dataSource5.value.length + 1);
async function handleAdd5() {
  const newData = {
    pointId:faultPointId.value,
    description:'',
    // ErrorDescription: `@@@@@@@@@@-${count5.value}`,
  };
  await addAnalysis(newData)
  let res = await getAnalysis({pointId:faultPointId.value})
  dataSource5.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource5.value.push({key:(element.id).toString(),SerialNumber:(index+1),ErrorDescription:element.description})  
  });
}
// 删除弹窗
async function deleteConfirmFn5(value:any) {
  await deleteAnalysis(value)
  let res = await getAnalysis({pointId:faultPointId.value})
  dataSource5.value = []
  resData.value = res
  resData.value.forEach((element:any,index:any) => {
    dataSource5.value.push({key:(element.id).toString(),SerialNumber:(index+1),ErrorDescription:element.description})  
  });
}
const editableData5: UnwrapRef<Record<string, DataItem5>> = reactive({});

function edit5(value:any) {
  editableData5[value] = cloneDeep(dataSource5.value.filter((item:any) => value === item.key)[0]);
}
async function save5(value:any) {
  Object.assign(dataSource5.value.filter((item:any) => value === item.key)[0], editableData5[value]);
  const putData = {
    description: editableData5[value].ErrorDescription,
  };
  const params = { id: value}
  await putAnalysis(params,putData)
  delete editableData5[value];
}
function cancel5(value:any) {
  delete editableData5[value];
}
// ==================55555结束========================================
</script>

<style scoped>
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.wp_class{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background-color: black;
    z-index: 999;
}
.header {
    width: 100%;
    height: 172px;
    background-image: url('/public/images/页面二/BG.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    overflow: hidden;
}
h1 {
    color: white;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 5px;
    margin-top: 23px;
    margin-left: 97px;
}
.userName {
    display: inline-block;
    background-image: url('/public/images/页面二/登录名.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    width: 137px;
    height: 44px;
    color: aliceblue;
    text-align: center;
    line-height: 44px;
    font-size: 20px;
    position: absolute;
    top: 35px;
    right: 41px;
    z-index: 2;
}
.content {
    width: 1745px;
    height: 622px;
    /* border: 1px  solid white; */
    margin-left: 91px;
    overflow-x: hidden;
    position: relative;
}
.content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}
h3 {
  color: white;
  position: absolute;
  font-size: 36px;
  margin-left: 130px;
}
.box {
  width: 100%;
  height: 55px;
  margin-bottom: 30px;
  position: relative;
}
.btn {
    width: 369px;
    height: 46px;
    position: absolute;
    right: 126px;
    top: 0px;
    display: flex;
}
.refresh {
    width: 123px;
    height: 46px;
    color: #33cccc;
    font-size: 20px;
    line-height: 46px;
    border: 1px solid #33cccc;
    border-right: 0px;
    background-image: url('/public/images/页面三/刷新.png');
    background-repeat: no-repeat;
    background-size: 18%,18%;
    background-position: 22% 55%;
}
.refreshText {
  margin-left:62px;
}
.refresh:hover {
    background-color: #33cccc;
    background-image: url('/public/images/页面三/刷新-点击.png');
    background-repeat: no-repeat;
    background-size: 18%,18%;
    background-position: 22% 55%;
    color: black;
}
.goBack {
    width: 123px;
    height: 46px;
    color: #33cccc;
    font-size: 20px;
    line-height: 46px;
    border: 1px solid #33cccc;
    background-image: url('/public/images/页面三/撤销.png');
    background-repeat: no-repeat;
    background-size: 18%,18%;
    background-position: 22% 55%;
}
.goBackText {
  margin-left:62px;
}
.goBack:hover {
    background-color: #33cccc;
    background-image: url('/public/images/页面三/返回-点击.png');
    background-repeat: no-repeat;
    background-size: 18%,18%;
    background-position: 22% 55%;
    color: black;
}
.save {
    width: 123px;
    height: 46px;
    color: #33cccc;
    font-size: 20px;
    line-height: 46px;
    border: 1px solid #33cccc;
    background-image: url('/public/images/页面四/保存硬盘.png');
    background-repeat: no-repeat;
    background-size: 18%,18%;
    background-position: 22% 55%;
}
.saveText {
  margin-left:62px;
}
.save:hover {
    background-color: #33cccc;
    background-image: url('/public/images/页面四/保存硬盘-点击.png');
    background-repeat: no-repeat;
    background-size: 18%,18%;
    background-position: 22% 55%;
    color: black;
}
.baseMsg {
  width: 100%;
  height: 42px;
  background-image: url('/public/images/页面三/标题背景.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  position: relative;
}
.faultPointName {
  color: aliceblue;
  font-size: 24px;
  display: flex;
  /* background-color: pink; */
}
.faultPointNameImg {
  height: 28px;
  margin-top: 6px; 
  margin-right: 20px; 
  margin-left: 13px;
}
.terminalName {
  /* background-color: pink; */
  display: flex;
  font-size: 20px;
  line-height: 42px;
  color: white;
  position: absolute;
  right: 10px;
}
.terminalName>div {
  margin-right: 93px;
}
.terminalName>div:last-child {
  margin-right: 0px;
}
.terminaList {
  color: black !important;
  display: inline-block;
  width: 225px;
  height: 28px;
  background-color: #33cccc;
  margin-top: 8px;
  line-height: 28px;
  padding-left: 18px;
  border-radius:5px;
}
.faultDescription {
  margin-top: 59px;
  margin-left: 55px;
}
:deep(.ant-table-pagination.ant-pagination) {
  display: none;
}
:deep(.ant-table-cell) {
  text-align: center;
}
:deep(.ant-btn) {
  width: 37px;
  height: 37px;
  background-color: #33cccc;
  border: none;
  border-radius: 0px;
  padding: 0px;
  margin: 0;
  position: relative;
  float: right;
  margin-top: 10px;
}
.addPic {
  width: 13px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.deletePop {
  width: 407px;
  height: 225px;
  background-color: #1c2935;
  text-align: center;
  padding-top: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}
.deleteText {
  color: #33cccc;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 5px;
}
.Btn {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 45px;
}
.deleteCancel {
  width: 123px;
  height: 46px;
  line-height: 46px;
  border: 1px solid #33cccc;
  border-right: none;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.78px;
  color: #33cccc;
}
.deleteCancel:hover {
  background-color: #33cccc;
  color: black;
}
.deleteConfirm {
  width: 123px;
  height: 46px;
  line-height: 46px;
  border: 1px solid #33cccc;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.78px;
  color: #33cccc;
}
.deleteConfirm:hover {
  background-color: #33cccc;
  color: black;
}
:deep(.ant-table-thead) {
  height: 53px;
}
:deep(.ant-table-thead > tr > th) {
  background-color: #0e1721;
  color: #33cccc;
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-right: 1px solid #364b60 !important;
  border-bottom: 1px solid #364b60;
  padding: 0px;
}
:deep(.ant-table) {
  color: azure;
   background: transparent;
}
:deep(.ant-table-tbody > tr > td) {
  background: transparent;
  border-bottom: 1px solid #364b60;
  border-right: 1px solid #364b60 !important;
  font-size: 20px;
  padding: 10px;
}
:deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
  background: #1c4a50;
}
.operationBtn {
  display: none;
  /* display: flex;
  justify-content: center */
}
:deep(.ant-table-tbody > tr.ant-table-row:hover > td:last-child > .operationBtn) {
  display: flex;
  justify-content: center
}
:deep(.ant-table.ant-table-bordered > .ant-table-container) {
  border: none;
}
:deep(.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table) {
  border-top: 3px solid #364b60;
}
:deep(.ant-table-container table > thead > tr:first-child th:last-child) {
  border-right: none !important;
}
:deep( .ant-table-tbody > tr > td:last-child) {
  border-right: none !important;
}
:deep(.ant-table-body){
  min-height: 35px;
  padding: 0;
}
:deep(.ant-input) {
  /* background: #33cccc; */
  background: #1c2935;
  border: none;
  font-size: 20px;
  color: white;
  text-align: center;
  padding: 3px 16px;
}
:deep(.ant-input:focus, .ant-input-focused) {
  box-shadow:none;
}
:deep(.ant-table-tbody tr:nth-child(even)) {
  background-color: #121a21;
}
:deep(.ant-table-tbody tr:nth-child(even) > td:first-child) {
  background-color: #121a21;
}
:deep(.ant-table-tbody tr:nth-child(even) > td:last-child) {
  background-color: #121a21;
}
:deep(.ant-table-tbody tr:nth-child(odd) > td:first-child) {
  background-color: black;
}
:deep(.ant-table-tbody tr:nth-child(odd) > td:last-child) {
  background-color: black;
}
</style>
<style scoped lang="less">

// /deep/.ant-table-body {
//   &::-webkit-scrollbar {
//     height: 12px;
//     width: 0px;
//     overflow-y: auto;
//   }
//   &::-webkit-scrollbar-thumb {
//     display: none;
//   }
//   &::-webkit-scrollbar-track {
//     -webkit-box-shadow: 0;
//     border-radius: 0;
//     background: black;
//   }
// }

.pops {
  .ant-popover-message-title {
    color: #33cccc;
  }
  .ant-popover-buttons {
    text-align: center;
  }
  .ant-btn-primary {
    background-color: transparent;
  }
  .anticon svg {
    display: none;
  }
  .ant-popover-message-title {
    padding-left: 10px;
  }
  .ant-btn {
    border-color: #33cccc;
    color: #33cccc;
    background-color: transparent;
  }
  .ant-btn:hover {
    background-color: #33cccc;
    color: black;
  }
  .ant-popover-inner {
    background-color: #1c2935;
  }
  .ant-popover-arrow-content {
    background-color: #1c2935;
  }
  .ant-popover-arrow-content::before {
    background-color: #1c2935;
  }
}

// /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header {
//   background: #fff !important;
//   box-sizing: border-box !important;
// }
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    height: 12px;
    width: 0px;
    overflow-y: auto;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #939392;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: 0;
    border-radius: 0;
    background: #0e4291;
  }
}
</style>